<template>
  <div>
    <el-dialog :title="title" :visible.sync="detailvisible" width="800px" append-to-body class="my-dialog" @close="cancel">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="姓名" prop="realName">
            <el-input
              v-model="queryParams.realName"
              placeholder="请输入姓名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="queryParams.phone"
              placeholder="请输入手机号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" plain>搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="teamUserVisible=true" plain>新增执勤点人员</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="teamlist" size="small" height="400">
          <el-table-column label="姓名" align="center" prop="nickName"/>
          <el-table-column label="手机号" align="center" prop="phone"/>
          <el-table-column label="岗位" align="center" prop="pointsId"/>
<!--          <el-table-column label="操作" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button-->
<!--                size="mini"-->
<!--                type="text"-->
<!--                icon="el-icon-delete"-->
<!--                @click="deletUser(scope.row)"-->
<!--                v-hasPermi="['system:stagnation_point:edit']"-->
<!--              >移除-->
<!--              </el-button-->
<!--              >-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :layout="layout"
          @pagination="getList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
<!--        <el-button type="primary" @click="submitForm" size="small" plain>确 定</el-button>-->
        <el-button @click="cancel" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <teamAdd :visible.sync="teamUserVisible" :param="param" @getList="getList"></teamAdd>
  </div>
</template>

<script>
import {listStagnationPointUser, delStagnationPointUser} from "@/api/system/stagnation_point";
import teamAdd from "./add"

export default {
  name: "index",
  props: ['visible', 'param'], // param 执勤点信息
  components:{teamAdd},
  data() {
    return {
      teamlist: [],
      detailvisible: false,
      title: '执勤点人员信息',
      // 遮罩层
      loading: true,
      // 选中数组
      layout: 'total, sizes, prev, pager, next',
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        realName: '',
        phone: ''
      },
      teamUserVisible: false
    }
  },
  watch: {
    visible() {
      this.detailvisible = this.visible
      if (this.visible) {
        console.log('执勤点信息', this.param)
        this.queryParams.pointsId = this.param.id
        this.getList()
      } else {
      }
    }
  },
  created() {
  },
  methods: {
    /** 查询定位器列表 */
    getList() {
      this.loading = true;
      listStagnationPointUser(this.queryParams).then(response => {
        this.teamlist = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    deletUser(row){
      this.$modal
        .confirm(`确定将该人员从执勤点移除,是否继续？`)
        .then(function () {
          return delStagnationPointUser(row.id);
        })
        .then(() => {
          this.$modal.msgSuccess("移除成功");
          this.getList()
        })
        .catch(() => {
        });
    },
    submitForm() {
      if (!this.dealerItem) {
        this.$message.error(this.title)
        return
      }
      let that = this
      console.log('dealerItem:', this.dealerItem, that.queryData)
      // type batchBindingUser 批量绑定设备； bindingUser 单独绑定设备
      if (this.type == 'bindingUser') {
        this.$modal
          .confirm(`确定将该设备绑定至【${this.dealerItem.realName}】,是否继续？`)
          .then(function () {
            return delStagnationPointUser({
              deviceIds: [that.queryData.deviceId],
              dealerId: that.dealerItem.adminId
            });
          })
          .then(() => {
            this.$modal.msgSuccess("绑定成功");
            this.$emit('getList')
            this.cancel()
          })
          .catch(() => {
          });
        return
      }
      if (this.type == 'batchBindingUser') {
        this.$modal
          .confirm(`确定为经销商【${this.dealerItem.realName}】批量绑定【${this.queryData.length}】台设备,是否继续？`)
          .then(function () {
            return DevideBindingUser({
              deviceIds: that.queryData,
              dealerId: that.dealerItem.adminId
            });
          })
          .then(res => {
            // this.$modal.msgSuccess("绑定成功");
            // this.messegeFn(res.msg)
            this.$emit('getList')
            this.cancel()
          })
          .catch(() => {
          });
        return
      }
      this.$emit('dealerGet', this.dealerItem)
      this.cancel()
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.dealerId = ''
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dealerId = ''
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style scoped>

</style>
